<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:p="http://primefaces.org/ui">

<h:head>
	<title>Package</title>
	<link type="text/css" rel="stylesheet" href="css/dth.css" />
	<script>
		$(document).ready(
				function() {
					$('.checkbox').click(
							function() {

								var selected;
								if ($(this).is(":checked")) {
									selected = true;
									//alert("clicked1:"+selected);
									$(this).parent().parent().parent()
											.addClass("selected_package");
								} else {
									selected = false;
									$(this).parent().parent().parent()
											.removeClass("selected_package");
								}
								//alert("clicked:"+selected);
							});
				});
	</script>
	<style>
.menu2 {
	box-shadow: 6px 11px 10px;
}

.selected_package {
	background: #E6E6FA !important;
}
</style>
</h:head>

<h:body>

	<ui:insert name="header">
		<ui:include src="/header/header_dth.xhtml" />
	</ui:insert>
	<div>
		<div class="dth_body_home">
			<ui:insert name="header_banner">
				<ui:include src="/header/header_banner.xhtml" />
			</ui:insert>
			<div class="dth_content_home">
				<p:ajaxStatus
					style="bottom: 68%;
				    height: 32px;
				    position: fixed;
				    right: 50%;
				    width: 32px;
				    z-index: 99999;">
					<f:facet name="start">
						<p:graphicImage value="images/loading.gif" />
					</f:facet>

					<f:facet name="complete">
						<h:outputText value="" />
					</f:facet>
				</p:ajaxStatus>
				<p:growl id="growl" showDetail="true" sticky="false" />
				<h:form>
					<h:panelGroup id="mainform">
						<ui:repeat var="item" value="#{packageBean.listPackage}">
							<h:panelGroup rendered="#{item.selected==true}">
								<div class="selected_package"
									style="width: 100%; height: 215px; float: left; margin-bottom: 10px; border-bottom: 1px solid #CA96D9;">
									<div
										style="width: 20%; height: 100%; float: left; text-align: center; margin-top: 3%;">
										<p:graphicImage value="images/packageitem.jpg"></p:graphicImage>
									</div>
									<div style="width: 80%; height: 100%; float: left;">
										<div
											style="background: none repeat scroll 0 0 #CA96D9; color: #FFFFFF; float: left; height: 15%; padding-left: 2%; width: 98%;">
											<h:outputText style="font-size: 18px;font-weight: bold;"
												value="#{item.name}"></h:outputText>
											<h:outputText
												style="font-size: 18px;font-weight: bold;color:#161576;margin-left:10px;"
												value="#{item.priceStr}$"></h:outputText>
											<h:selectBooleanCheckbox value="#{item.selected}"
												styleClass="checkbox"
												style="float:right;margin-right:10px;margin-top: 6px;"></h:selectBooleanCheckbox>
											<!-- k dùng p: dc == -->
										</div>
										<div
											style="width: 100%; height: 85%; float: left; overflow: auto;">
											<h:outputText value="#{item.description}" escape="flase"></h:outputText>
										</div>
									</div>
								</div>
							</h:panelGroup>
							<h:panelGroup rendered="#{item.selected==false}">
								<div 
									style="width: 100%; height: 215px; float: left; margin-bottom: 10px; border-bottom: 1px solid #CA96D9;">
									<div
										style="width: 20%; height: 100%; float: left; text-align: center; margin-top: 3%;">
										<p:graphicImage value="images/packageitem.jpg"></p:graphicImage>
									</div>
									<div style="width: 80%; height: 100%; float: left;">
										<div
											style="background: none repeat scroll 0 0 #CA96D9; color: #FFFFFF; float: left; height: 15%; padding-left: 2%; width: 98%;">
											<h:outputText style="font-size: 18px;font-weight: bold;"
												value="#{item.name}"></h:outputText>
											<h:outputText
												style="font-size: 18px;font-weight: bold;color:#161576;margin-left:10px;"
												value="#{item.priceStr}$"></h:outputText>
											<h:selectBooleanCheckbox value="#{item.selected}"
												styleClass="checkbox"
												style="float:right;margin-right:10px;margin-top: 6px;"></h:selectBooleanCheckbox>
											<!-- k dùng p: dc == -->
										</div>
										<div
											style="width: 100%; height: 85%; float: left; overflow: auto;">
											<h:outputText value="#{item.description}" escape="flase"></h:outputText>
										</div>
									</div>
								</div>
							</h:panelGroup>
						</ui:repeat>
						<div style="width: 100%; height: auto; float: left;">
							<p:commandButton action="#{packageBean.suggestPackage}"
								update=":growl"
								style="background: none repeat scroll 0 0 #161576;color: #FFFFFF;float: right;height: 30px;margin: 10px;width: 158px;"
								value="Suggest a package"></p:commandButton>
						</div>
					</h:panelGroup>

				</h:form>
			</div>
		</div>
	</div>
	<ui:insert name="header">
		<ui:include src="/footer/footer_dth.xhtml" />
	</ui:insert>

</h:body>
</html>